/**
 * 按原型只有一个新建按钮
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, Input, message } from 'antd';
import { defaultData } from '../../services/productType';
import Export from '../../components/export';
import { columns } from './table';
import PermissionControl from '../../components/permissionControl';

const styles = {
	bv: {
		textAlign: 'right',
		margin: '1em 0'
	},
	but: {
		marginLeft: '1em'
	},
	input: {
		width: '30%'
	},
	s: {
		float: 'right'
	}
};

class Filter extends Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			modalVisible: false
		};
	}

	delete = () => {
		const { keys } = this.props;
		this.setState({ modalVisible: false });
		this.props.delete(keys);
	}

	openModal = () => {
		const { keys } = this.props;
		if (keys && keys.length) this.setState({ modalVisible: true });
		else {
			message.warning('请选择要删除的产品品类');
		}
	}

	search = () => {
		// 收集参数，调用上层
		const { keyWord } = this.state;
		this.props.query({
			...defaultData.query,
			query: {
				name: keyWord
			}
		});
	}

	reset = () => {
		// 清理参数，调用上层
		this.setState({
			keyWord: ''
		});
		this.props.query({
			...defaultData.query
		});
	}

	render() {
		const { keyWord } = this.state;
		const { exportTitle, keys } = this.props;
		return (
			<div>
				<div>
					<Input placeholder="输入关键字" style={styles.input} value={keyWord} onChange={e => this.setState({ keyWord: e.target.value })} />
					<div style={styles.s}>
						<Button
							type="primary"
							onClick={this.search}
							icon="search"
							className="search"
						>搜索</Button>
						<Button onClick={this.reset} style={styles.but} icon="sync">重置</Button>
					</div>
				</div>
				<div style={styles.bv}>
					<Export
						columns={columns}
						title={exportTitle}
						queryData={{ name: keyWord }}
						ids={keys}
					/>
					<PermissionControl url="/product/productCategory/add">
						<Button onClick={this.props.new} icon="plus" className="opt-but">添加</Button>
					</PermissionControl>
					<PermissionControl url="/product/productCategory/delete">
						<Button
							onClick={this.openModal}
							icon="delete"
							style={styles.but}
							className="opt-but"
						>
							删除
						</Button>
					</PermissionControl>
				</div>
				<Modal
					title="删除选中品类"
					visible={this.state.modalVisible}
					onOk={this.delete}
					onCancel={() => this.setState({ modalVisible: false })}
				>
					确定要删除选中的品类吗？
				</Modal>
			</div>
		);
	}
}

Filter.propTypes = {

};

export default Filter;
